<template>
  <FormItemWrapper :component="component">
    <TimePicker v-model="formData[component.compConfigData.fieldConfig.bindingFieldName]"
                :type="component.compConfigData.widgetConfig.type"
                :format="component.compConfigData.widgetConfig.format"
                :steps="component.compConfigData.widgetConfig.steps"
                :placement="component.compConfigData.widgetConfig.placement"
                :placeholder="component.compConfigData.widgetConfig.placeholder"
                :confirm="component.compConfigData.widgetConfig.confirm"
                :size="component.compConfigData.widgetConfig.size"
                :disabled="component.compConfigData.widgetConfig.disabled"
                :clearable="component.compConfigData.widgetConfig.clearable"
                :readonly="component.compConfigData.widgetConfig.readonly"
                :editable="component.compConfigData.widgetConfig.editable"
                :transfer="component.compConfigData.widgetConfig.transfer"
                :element-id="component.compConfigData.widgetConfig.elementId"
                :separator="component.compConfigData.widgetConfig.separator"
                @on-change="onChangeHandler"
                @on-ok="onOkHandler"
                @on-clear="onClearHandler"
    >

    </TimePicker>
  </FormItemWrapper>
</template>

<script>
import FormLayoutCommonUtil from "@/utils/FormLayoutCommonUtil";
import FormWidgetMixin from "@/mixin/FormWidgetMixin";

export default {
  name: "FormItemTimePickerWidget",
  mixins: [FormWidgetMixin],
  attr: {
    version: '1.0',
    configDataTemp: Object.assign({

      fieldConfig: FormLayoutCommonUtil.buildWidgetFieldConfig(),
      formItemConfig: FormLayoutCommonUtil.buildFormItemConfig({}, ''),
      widgetConfig: {
        type: 'time',
        format: 'HH:mm:ss',
        steps: [],
        placement: 'bottom-start',
        placeholder: '',
        confirm: false,
        size: 'default',
        disabled: false,
        clearable: true,
        readonly: false,
        editable: true,
        transfer: false,
        elementId: '',
        separator: '-'
      },
      widgetEventCodeConfig: FormLayoutCommonUtil.buildWidgetEventCodeConfig({
        onChange: {remark: '数据改变时触发', resultValues: ['value'], code: ''},
        onOk: {remark: '点击确定按钮时触发', resultValues: [], code: ''},
        onClear: {remark: '在清空日期时触发', resultValues: [], code: ''},
      })

    })
  },
  data() {
    return {}
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.runWidgetOnMountedEventCode()
    },

    onChangeHandler(value) {
      this.runWidgetEventCode('onChange', (fn)=>{
        fn.call(this, value)
      })
    },
    onOkHandler() {
      this.runWidgetEventCode('onOk')
    },
    onClearHandler() {
      this.runWidgetEventCode('onClear')
    },
  },
  computed: {},
  watch: {}
}
</script>

<style scoped>

</style>
